<template>
    <div>
        <el-row class="buttonList" style="margin-top: 5px">
            <el-col>
                <el-button  :disabled="newAddbtn" type="primary" size="mini" @click="newAddData">新增</el-button>
                <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit">编辑</el-button>
                <el-button :disabled="editDisabled" type="primary" size="mini" @click="synchronization">同步</el-button>
                <el-button :disabled="btnDisabled" type="primary" size="mini" @click="deletelist">删除</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <el-tree accordion highlight-current :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-col>
            <el-col :span="20">
                <el-table
                        :data="data"
                        border
                        size="mini"
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="NAME"
                            label="归类名称">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="REMARKS"
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="STATUS"
                            label="状态">
                        <template slot-scope="scope">
                            {{scope.row.STATUS ? '启用' : '禁用'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="USERNAME"
                            label="创建人">
                    </el-table-column>
                    <el-table-column
                            width="160px"
                            align="center"
                            prop="CREATETIME"
                            label="创建时间">
                        <template slot-scope="scope">
                            {{new Date(scope.row.CREATETIME).toLocaleString()}}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-size="pagination.pageSize"
                        :total="pagination.total"
                        :page-sizes="[10, 20, 30, 50, 100]"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="设备属性" :visible.sync="dialogFormVisible" center width="30%">
            <el-form :model="form" :label-width="formLabelWidth">
                <el-form-item label="归类名称">
                    <el-input size="mini" v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input size="mini" v-model="form.remarks" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="newAdd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "equipmentAttr",
        data() {
            return {
                pagination: {
                    pageSize: 20,
                    total: 1,
                    pageNo: 1
                },
                dialogFormVisible: false,
                data: [],
                form: {
                    name: '',
                    remarks: ''
                },
                formLabelWidth: '70px',
                selectId: [],
                btnDisabled: true,
                editDisabled: true,
                newAddbtn: true,
                isEdit: '',
                treeData: [],
                defaultProps: {
                    children: 'list',
                    label: 'NAME'
                },
                testId: ''
            }
        },
        created() {
            this.getData(this.pagination.pageSize, this.pagination.pageNo, this.testId);
            this.getTreeData()
        },
        methods: {
            getData(pageSize, pageNo, testId) {
                this.$post('/insrtumentClassification/findInstrumentClassification', {pageSize, pageNo,testId}).then(res => {
                    this.data = res.data.data.dataList;
                })
            },
            getTreeData() {
                this.$post('/public/findStructureByTestBase').then(res => {
                    this.treeData = res.data.data;
                })
            },
            newAddData() {
                this.dialogFormVisible = true;
                this.isEdit = '';
            },
            newAdd() {
                let url = '';
                if(this.isEdit === 'edit') {
                    url = '/insrtumentClassification/update';
                    this.form.id = this.selectId[0].ID;
                    this.form.testId = this.testId;
                } else {
                    url = '/insrtumentClassification/add';
                    this.form.testId = this.testId;
                }
                this.$post(url, this.form).then(res => {
                    if(res.data.status === 1) {
                        this.dialogFormVisible = false;
                        this.getData(this.pagination.pageSize, this.pagination.pageNo);
                        this.$message.success('保存成功');
                    } else {
                        this.$message.error('保存失败,请稍后再试');
                    }
                });
            },
            edit() {
                this.dialogFormVisible = true;
                this.isEdit = 'edit';
                this.form.name = this.selectId[0].NAME;
                this.form.remarks = this.selectId[0].REMARKS;
            },
            synchronization() {
                let arr = [];
                for(let i = 0; i < this.selectId.length; i++) {
                    arr.push(this.selectId[i].ID);
                }
                this.$post('/insrtumentClassification/inventory', {ids: arr.join()}).then(res => {
                    if(res.data.status === 1) {
                        this.$message.success('同步成功');
                    } else {
                        this.$message.error('同步失败，请稍后再试');
                    }
                })
            },
            deletelist() {
                this.$post('/insrtumentClassification/findInstrumentNumByClassificationId', {id: this.selectId[0].ID}).then(res => {
                    this.$confirm(`此归类属性绑定设备数量为${res.data.data},确定删除吗？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$post('/insrtumentClassification/delete', {id: this.selectId[0].ID}).then(res => {
                            if(res.data.status === 1) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.getData(this.pagination.pageSize, 1)
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                })
            },
            handleSelectionChange(val) {
                if(this.testId === '') return;
                this.selectId = val;
                if(val.length === 1) {
                    this.btnDisabled = false;
                } else {
                    this.btnDisabled = true;
                }
                if(val.length > 0) {
                    this.editDisabled = false;
                } else {
                    this.editDisabled = true;
                }
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.getUser(size, this.pagination.pageNo);
            },
            handleCurrentChange(page) {
                this.pagination.pageNo = page;
                this.getUser(this.pagination.pageSize, page);
            },
            handleNodeClick(data, node) {
                if(node.level === 3) {
                    this.newAddbtn = false;
                    this.testId = data.ID;
                    this.getData(this.pagination.pageSize, this.pagination.pageNo, data.ID);
                } else {
                    this.testId = '';
                    this.newAddbtn = true;
                }
            }
        }
    }
</script>

<style scoped>

</style>
